import { memo, useEffect,useState } from "react";
import { useParams } from "react-router";
import { getPlayListDetailsById,getRelatedPlayList } from "../../services/playlist";
import DetailCard from "./detailCard";
import {PlayDetailsContainer} from "./style";
import PlayList from "./playList"
import PlayListCard from "../../components/PlayListCard";
export default memo(function PlayListDetails(){
    const {playListId} = useParams()
    const [playDetails,setPlayDetails] = useState({})
    const [relatedList,setRelatedList] = useState([])
    const handleFetchPlayListDetails = ()=>{
        getPlayListDetailsById({id:playListId}).then(res=>{
            if(res.code===200){
                setPlayDetails(res)
            }
        })
    }
    const handleGetRelatedPlayList = ()=>{
        getRelatedPlayList({id:playListId}).then(res=>{
            if(res.code===200){
                setRelatedList(res.playlists)
            }
        })
    }
    useEffect(()=>{
        handleFetchPlayListDetails()
        // handleGetRelatedPlayList()
    },[])
    return <PlayDetailsContainer>
        {/* 歌单详情 */}
        <DetailCard playListInfo={playDetails?.playlist}/>
        {/* 歌单列表 */}
        <PlayList list={playDetails?.playlist?.tracks}/>
        {/*//TODO 相关歌单 */}
        {/* <PlayListCard title="相关歌单" list={relatedList}></PlayListCard> */}
    </PlayDetailsContainer>
})